<template>
  <div>
    <el-card>
      <div class="top">
        <el-select v-model="queryinfo.stage_id" placeholder="请选择阶段">
          <el-option
            v-for="item in collegeStage"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select v-model="queryinfo.tc_id" placeholder="请选择教学周期">
          <el-option
            v-for="item in TeachingTimeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch()"
          >搜索</el-button
        >
      </div>

      <div class="table">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column
            prop="course_id__school_id__name"
            label="学院"
            width="180"
          >
          </el-table-column>
          <el-table-column prop="course__stage" label="阶段" width="180">
          </el-table-column>
          <el-table-column prop="cls_id__name" label="班级"> </el-table-column>
          <el-table-column prop="course__name" label="课程"> </el-table-column>
          <el-table-column prop="teaching_time__title" label="教学周期">
          </el-table-column>
          <el-table-column prop="class_time" label="课节"> </el-table-column>
          <el-table-column prop="lecturer__name" label="讲师">
          </el-table-column>
          <el-table-column prop="counsellor__name" label="导员">
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[5, 10, 15]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getTeachingCycle } from '../../api/teachingtime'
import { getColleges } from '../../api/department'
import { getCollegeStageByCollegeId } from '../../api/college_stage'
import { getCoursePlanSearch } from '../../api/courseplan'
export default {
  data() {
    return {
      queryInfo: {
        pagenum: 1,
        pagesize: 5,
      },
      queryinfo: {
        college_id: '',
        tc_id: '',
        stage_id: '',
      },
      TeachingTimeOptions: [],
      collegeStage: [],
      tableData: [],
      CollegesOptions: [],
      total: 0,
    }
  },
  methods: {
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getCoursePlanSearch()
    },
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage
      this.getCoursePlanSearch()
    },

    async handleSearch() {
      let college_id = sessionStorage.getItem('department')
      if (college_id != null) {
        this.queryinfo.college_id = college_id
        console.log(this.queryinfo.stage_id)
        const result = await getCoursePlanSearch(
          this.queryinfo.tc_id,
          this.queryinfo.college_id,
          this.queryinfo.stage_id,
          this.queryInfo.pagesize,
          this.queryInfo.pagenum
        )

        this.tableData = result.data //列表中展示的数据内容
        console.log(result.data)
        this.total = result.count
      }
    },
    async getCoursePlanSearch() {
      let college_id = sessionStorage.getItem('department')
      if (college_id != null) {
        this.queryinfo.college_id = college_id

        let result = await getCoursePlanSearch(
          this.queryinfo.tc_id,
          this.queryinfo.college_id,
          this.queryinfo.stage_id,
          this.queryInfo.pagesize,
          this.queryInfo.pagenum
        )
        console.log(this.queryinfo.stage_id)
        this.tableData = result.data
        console.log(result)
        this.total = result.count
      }
    },

    async getTeachingTimeList() {
      let result = await getTeachingCycle()
      if (result) {
        result.forEach((item) => {
          this.TeachingTimeOptions.push({
            value: item.id,
            label: item.title,
          })
        })
      }
    },
    async getCollegeStageByCollegeId() {
      let college_id = sessionStorage.getItem('department')
      if (college_id != null) {
        this.queryinfo.college_id = college_id
        let result = await getCollegeStageByCollegeId(college_id)
        if (result) {
          result.forEach((item) => {
            this.collegeStage.push({
              value: item.id,
              label: item.name,
            })
          })
          console.log(this.collegeStage)
        }
      }
    },

    async getCollegesList() {
      let result = await getColleges()
      if (result) {
        result.forEach((item) => {
          this.CollegesOptions.push({
            value: item.id,
            label: item.name,
          })
        })
      }
    },
  },
  computed: {},
  components: {},
  created() {
    this.getTeachingTimeList()
    this.getCollegeStageByCollegeId()
    this.getCollegesList()
    this.getCoursePlanSearch()
  },
  mounted() {},
}
</script>

<style scoped lang="less">
.top .el-select {
  margin-right: 30px;
}
</style>
